<template>
  <FixedSizeList :data="data" :height="200" :width="50" :itemHeight="20" :itemCount="data.length">
    <template #listItem="{ itemData, index }">
      <div :class="index % 2 === 0 ? 'even' : 'odd'">{{ itemData }}</div>
    </template>
  </FixedSizeList>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { FixedSizeList } from '@lib/core';
  const data = ref([...new Array(101).keys()].slice(1, 101));
  // console.log(data.value.length);
</script>

<style scoped>
  .odd {
    background-color: aliceblue;
  }
  .even {
    background-color: lightgreen;
  }
</style>
